<template>
  <view class="card-container">
    <view @click="navigationToPickOrder()">
      <view class="title"> {{ order.toiletryOrderNo }}</view>
      <view class="order-box">
        <view class="order-image">
          <!-- logo -->
          <image class="order-image-type" :src="order.logoUrl" />
        </view>
        <view class="order-attr">
          <view class="order-type-text"> {{ order.serviceName }}</view>
          <view class="order-time-box">
            <view class="order-time-text">预约时间：</view>
            <view class="order-time-date">{{ serviceTime }}</view>
          </view>
          <view class="order-time-box">
            <view class="order-time-text">下单时间：</view>
            <view class="order-time-date">{{ order.createdAt }}</view>
          </view>
        </view>
      </view>
      <view class="order-line"></view>
      <view class="contacts-box">
        <!--  -->
        <view class="contacts-data">
          <image class="contacts-img" src="https://img.qumoyugo.com/webimgbg/nurse_stay_orders_name_icon@2x.png" />
          <view class="contacts-text"> {{ order.subscribePerson }}（{{ order.subscribePhone }}） </view>
        </view>
        <view class="address-box">
          <image class="address-img" src="https://img.qumoyugo.com/webimgbg/nurse_stay_orders_address_icon@2x.png" />
          <view class="address-text"> {{ order.subscribeAddress }} </view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="button-box" v-if="order.orderStatus != '4'">
      <!-- 打电话 -->
      <button class="button-call" @click="onCall()">
        <image class="icon-img" src="https://img.qumoyugo.com/webimgbg/nurse_stay_orders_tel_btn@2x.png" />
        <span class="button-text">打电话</span>
      </button>

      <button class="button-call" @click="navigationTo()">
        <image class="icon-img" src="https://img.qumoyugo.com/webimgbg/nurse_stay_orders_navigation_btn@2x.png" />
        <span class="button-text">导航</span>
      </button>
      <view class="button-call" v-if="order.orderStatus === '1'">
        <uni-datetime-picker v-if="order.orderStatus === '1'" v-model="startStr" @change="change" :hideSecond="true">
          <view class="button-call1">
            <image class="icon-img" src="https://img.qumoyugo.com/webimgbg/nurse_stay_orders_time_btn.png" />
            <span class="button-text">更改时间</span>
          </view>
        </uni-datetime-picker>
      </view>
      <button class="button-order" @click="orderHandler()">{{ buttonStr }}</button>
    </view>
  </view>
</template>

<script setup>
import { defineProps, computed, ref, getCurrentInstance } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const props = defineProps({
  order: {
    type: Object,
    required: true
  }
})
const buttonStr = computed(() => {
  const status = props.order.orderStatus
  if (status === '1') {
    return '确认接单'
  } else if (status === '2') {
    return '开始服务'
  } else if (status === '3') {
    return '服务完成'
  }
  return status
})
// 开始时间字符串
const startStr = ref(props.order.subscribeStartTime)

const change = e => {
  // 弹窗
  uni.showModal({
    content: '是否确认修改时间',
    success: function (res) {
      if (res.confirm) {
        changeTime()
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}
// 服务时间
const serviceTime = computed(() => {
  let endTime = props.order.subscribeEndTime
  if (props.order.subscribeEndTime) {
    endTime = props.order.subscribeEndTime.substr(10, props.order.subscribeEndTime.length)
  }
  return props.order.subscribeStartTime + ' - ' + endTime
})

// 确认修改时间函数
const changeTime = () => {
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/wash/order/updateSubscribeTime',
      type: '',
      method: 'post',
      data: { id: props.order.id, newTime: startStr.value }
    })
      .then(res => {
        if (res.code === 0) {
          // 组装数据
          if (res.data) {
            uni.$emit('updateSubscribeTime', {
              id: props.order.id
            })
          }
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}
/**
 * 转跳页面
 */
const navigationToPickOrder = () => {
  uni.navigateTo({
    url: '/pages/wash/washOrderDetails?id=' + props.order.id
  })
}
// const changeTimeClick = () => {
//   popShow.value = true
// }
/**
 * 简单
 */
const orderHandler = () => {
  const status = props.order.orderStatus
  if (status === '1') {
    // 弹窗
    uni.showModal({
      content: '是否确认接单',
      success: function (res) {
        if (res.confirm) {
          pickUpOrder()
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  } else if (status === '2') {
    uni.navigateTo({
      url: '/pages/wash/washOrderDetails?id=' + props.order.id
    })
  } else if (status === '3') {
    // 弹窗
    uni.showModal({
      content: '是否确认服务已完成',
      success: function (res) {
        if (res.confirm) {
          finishOrder()
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
}
// 接单
const pickUpOrder = () => {
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/wash/order/pickUpOrder',
      type: '',
      method: 'post',
      data: { id: props.order.id }
    })
      .then(res => {
        if (res.code === 0) {
          // 组装数据
          if (res.data) {
            uni.$emit('refreshOrder', {
              id: props.order.id
            })
          }
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}
// 订单完成
const finishOrder = () => {
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/wash/order/finishOrder',
      type: '',
      method: 'post',
      data: { id: props.order.id }
    })
      .then(res => {
        if (res.code === 0) {
          // 组装数据
          if (res.data) {
            uni.$emit('refreshOrder', {
              id: props.order.id
            })
          }
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}
// 打电话
const onCall = () => {
  uni.makePhoneCall({
    phoneNumber: props.order.subscribePhone
  })
}
// 打开地图
const navigationTo = () => {
  uni.openLocation({
    latitude: Number.parseFloat(props.order.latitude),
    longitude: Number.parseFloat(props.order.longitude),
    address: props.order.subscribeAddress,
    success: function () {}
  })
}
</script>

<style lang="scss">
.card-container {
  margin-top: 20rpx;
  margin-left: 28rpx;
  margin-right: 28rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 3rpx 0rpx #e5e5e5;
  border-radius: 18rpx;
}
.title {
  padding-top: 28rpx;
  margin-left: 27rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.order-box {
  margin-top: 32rpx;
  display: flex;
  justify-content: flex-start;
}
.order-attr {
  margin-left: 36rpx;
}
.order-image {
  margin-left: 27rpx;
  width: 136rpx;
  height: 136rpx;
  background: #f4f4f4;
  border-radius: 18rpx;
}
.order-image-type {
  width: 136rpx;
  height: 136rpx;
  border-radius: 18rpx;
}
.order-type-text {
  font-size: 29rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-bottom: 32rpx;
}
.order-time-box {
  display: flex;
  justify-content: flex-start;
}
.order-time-text {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}
.order-time-date {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.order-line {
  margin-top: 43rpx;
  height: 1rpx;
  margin-bottom: 39rpx;
  background: #d8d8d8;
}
.contacts-box {
  margin-left: 28rpx;
}
.contacts-data {
  display: flex;
  justify-content: flex-start;
}
.address-box {
  padding-bottom: 39rpx;
  margin-top: 33rpx;
  display: flex;
  justify-content: flex-start;
}
.contacts-img {
  width: 34.72rpx;
  height: 34.72rpx;
}
.contacts-text {
  margin-left: 16rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.address-img {
  width: 34.72rpx;
  height: 34.72rpx;
}
.address-text {
  margin-left: 16rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.button-box {
  margin-left: 27rpx;
  margin-right: 27rpx;
  padding-bottom: 39rpx;
  display: flex;
  justify-content: center;
}
.button-call {
  padding-left: 17rpx;
  padding-right: 20rpx;
  height: 56rpx;
  background: #525fa2;
  border-radius: 11rpx;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-call1 {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-order {
  padding-left: 17rpx;
  padding-right: 20rpx;
  height: 56rpx;
  background: #ee751e;
  border-radius: 11rpx;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.icon-img {
  background-color: #525fa2;
  height: 30.56rpx;
  width: 30.56rpx;
}
.button-text {
  display: inline-block;
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.popup_main {
  position: fixed;
  top: 631rpx;
  left: 50%;
  width: 556rpx;
  height: 315.83rpx;
  background: #ffffff;
  border-radius: 18rpx;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background-color: #fff;
}
.title-input {
  margin-top: 40rpx;
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #262626;
}
.confim {
  margin-right: 75rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 34rpx;
  width: 174rpx;
  height: 63rpx;
  background: #525fa2;
  font-size: 26rpx;
  border-radius: 11rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.cancel {
  margin-left: 75rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 34rpx;
  width: 174rpx;
  height: 63rpx;
  background: #ffffff;
  font-size: 26rpx;
  border-radius: 11rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #525fa2;
}
.btn-box {
  display: flex;
  justify-content: space-between;
}
.time {
  display: flex;
  margin-top: 30rpx;
  margin-left: 50rpx;
  margin-right: 50rpx;
}
.time-input {
  margin-top: 6rpx;
  padding-left: 19rpx;
  padding-right: 19rpx;
}
.item-box {
  margin-left: 40rpx;
  text-align: center;
  height: 61rpx;
  background: #ffffff;
  align-items: center;
  border: 1px solid #525fa2;
  border-radius: 11rpx;
}
</style>
